<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>添加作者信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" :rules="ruleForm" label-width="80px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="form.name" placeholder="请输入作者姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="birthday">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="form.birthday"
                            value-format="yyyy-MM-dd"
                            style="width: 50%"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="作者简介" prop="description">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">表单提交</el-button>
                        <el-button type="info" @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        var checkId = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('作者编号不能为空'));
            }
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            } else {
                callback();
            }
        };
        return {
            form: {
                name: '',
                sex: '',
                birthday: '',
                description: '',
            },
            ruleForm: {
                name: [{ required: true, message: '请输入作者姓名', trigger: 'blur' }],
                sex: [{ required: true, message: '请选择作者性别', trigger: 'change' }],
                birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
                description:[]
            }
        };
    },
    created() {
        if(window.sessionStorage.getItem("role") != "admin"){
             this.$router.push({ path:'/403' })
        }
        
        this.getTypes();
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    this.$http.post('/author/add', this.form).then((res) => {
                        var result = res.data;
                        if (result.status == 1) {
                            this.$message.success('作者添加成功');
                            this.resetForm('form');
                        } else {
                            this.$message.error(result.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async getTypes() {
            const res = await this.$http.get('/type/list');
            this.typeList = res.data.data;
        }
    }
};
</script>